<!--
* @author wn
* @date 2023/08/18 11:43:35
* @description: 分类页骨架屏
!-->
<template name="skeleton">
	<view class="sk-container">
		<view class="search">
			<view
				class="input icon-search sk-transparent sk-text-28-1250-181 sk-text sk-pseudo sk-pseudo-circle"
			>
				女靴
			</view>
		</view>
		<view class="categories">
			<scroll-view scroll-y class="primary">
				<view
					class="item active sk-transparent sk-text-36-1702-472 sk-text sk-pseudo sk-pseudo-circle"
					>居家</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-686 sk-text sk-pseudo sk-pseudo-circle"
					>美食</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-937 sk-text sk-pseudo sk-pseudo-circle"
					>服饰</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-130 sk-text sk-pseudo sk-pseudo-circle"
					>母婴</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-35 sk-text sk-pseudo sk-pseudo-circle"
					>个护</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-789 sk-text sk-pseudo sk-pseudo-circle"
					>严选</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-933 sk-text sk-pseudo sk-pseudo-circle"
					>数码</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-471 sk-text sk-pseudo sk-pseudo-circle"
					>运动</view
				>
				<view
					class="item sk-transparent sk-text-36-1702-745 sk-text sk-pseudo sk-pseudo-circle"
					>杂项</view
				>
			</scroll-view>
			<scroll-view scroll-y class="secondary">
				<view is="components/XtxSwiper">
					<view class="carousel XtxSwiper--carousel">
						<swiper
							:autoplay="false"
							:circular="true"
							:interval="3000"
							:current="0"
						>
							<swiper-item
								style="
									position: absolute;
									width: 100%;
									height: 100%;
									transform: translate(100%, 0px) translateZ(0px);
								"
							>
								<navigator
									class="navigator XtxSwiper--navigator"
									hover-class="none"
								>
									<image mode="aspectFill" class="sk-image"></image>
								</navigator>
							</swiper-item>
						</swiper>
						<view class="indicator XtxSwiper--indicator">
							<text class="dot XtxSwiper--dot"></text>
							<text class="dot XtxSwiper--dot"></text>
							<text class="dot XtxSwiper--dot active XtxSwiper--active"></text>
							<text class="dot XtxSwiper--dot"></text>
							<text class="dot XtxSwiper--dot"></text>
						</view>
					</view>
				</view>
				<view>
					<view class="title">
						<text class="name sk-transparent sk-text-26-6667-551 sk-text"
							>T恤/polo/衬衫</text
						>
						<navigator
							class="more icon-right-after sk-transparent sk-text-29-9333-837 sk-text sk-pseudo sk-pseudo-circle"
							hover-class="none"
						>
							全部
						</navigator>
					</view>
					<view class="flow">
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-223 sk-text"
									>ins风小碎花泡泡袖衬110-160cm</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-863 sk-text"
										>99.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-355 sk-text"
									>趣味小恐龙绣花，男童灯芯绒衬衫</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-467 sk-text"
										>89.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-737 sk-text"
									>纯棉舒适女童印花荷叶袖小衫90-140cm</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-366 sk-text"
										>139.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-606 sk-text"
									>复古格调，儿童灯芯绒衬衫73-130cm</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-353 sk-text"
										>99.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-916 sk-text"
									>田园复古木耳边格纹全棉A字衬衫110-160cm</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-537 sk-text"
										>109.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-487 sk-text"
									>经典格子元素，男童加绒格子衬衫</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-674 sk-text"
										>125.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-959 sk-text"
									>度假风儿童薄款空调短袖衬衫73-130cm</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-300 sk-text"
										>79.000</text
									>
								</view>
							</navigator>
						</view>
						<view is="components/NavigatorGoods" class="nth">
							<navigator class="goods NavigatorGoods--goods" hover-class="none">
								<image class="image NavigatorGoods--image sk-image"></image>
								<view
									class="name NavigatorGoods--name ellipsis NavigatorGoods--ellipsis sk-transparent sk-text-16-6667-476 sk-text"
									>经典格子元素，男童格子纯棉衬衫</view
								>
								<view class="price NavigatorGoods--price">
									<text
										class="symbol NavigatorGoods--symbol sk-transparent sk-opacity"
										>¥</text
									>
									<text
										class="number NavigatorGoods--number sk-transparent sk-text-14-2857-18 sk-text"
										>89.000</text
									>
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view>
					<view class="title">
						<text class="name sk-transparent sk-text-26-6667-808 sk-text"
							>儿童鞋</text
						>
						<navigator
							class="more icon-right-after sk-transparent sk-text-29-9333-173 sk-text sk-pseudo sk-pseudo-circle"
							hover-class="none"
						>
							全部
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<style lang="scss">
.sk-transparent {
	color: transparent !important;
}
.sk-text-28-1250-181 {
	background-image: linear-gradient(
		transparent 28.125%,
		#eeeeee 0%,
		#eeeeee 71.875%,
		transparent 0%
	) !important;
	background-size: 100% 64rpx;
	position: relative !important;
}
.sk-text {
	background-origin: content-box !important;
	background-clip: content-box !important;
	background-color: transparent !important;
	color: transparent !important;
	background-repeat: repeat-y !important;
}
.sk-text-36-1702-472 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-686 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-937 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-130 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-35 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-789 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-933 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-471 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-36-1702-745 {
	background-image: linear-gradient(
		transparent 36.1702%,
		#eeeeee 0%,
		#eeeeee 63.8298%,
		transparent 0%
	) !important;
	background-size: 100% 94rpx;
	position: relative !important;
}
.sk-text-26-6667-551 {
	background-image: linear-gradient(
		transparent 26.6667%,
		#eeeeee 0%,
		#eeeeee 73.3333%,
		transparent 0%
	) !important;
	background-size: 100% 60rpx;
	position: relative !important;
}
.sk-text-29-9333-837 {
	background-image: linear-gradient(
		transparent 29.9333%,
		#eeeeee 0%,
		#eeeeee 70.0667%,
		transparent 0%
	) !important;
	background-size: 100% 60rpx;
	position: relative !important;
}
.sk-text-16-6667-223 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-opacity {
	opacity: 0 !important;
}
.sk-text-14-2857-863 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-355 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-467 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-737 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-366 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-606 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-353 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-916 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-537 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-487 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-674 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-959 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-300 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-16-6667-476 {
	background-image: linear-gradient(
		transparent 16.6667%,
		#eeeeee 0%,
		#eeeeee 83.3333%,
		transparent 0%
	) !important;
	background-size: 100% 33rpx;
	position: relative !important;
}
.sk-text-14-2857-18 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-26-6667-808 {
	background-image: linear-gradient(
		transparent 26.6667%,
		#eeeeee 0%,
		#eeeeee 73.3333%,
		transparent 0%
	) !important;
	background-size: 100% 60rpx;
	position: relative !important;
}
.sk-text-29-9333-173 {
	background-image: linear-gradient(
		transparent 29.9333%,
		#eeeeee 0%,
		#eeeeee 70.0667%,
		transparent 0%
	) !important;
	background-size: 100% 60rpx;
	position: relative !important;
}
.sk-image {
	background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
	background: #efefef !important;
	background-image: none !important;
	color: transparent !important;
	border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
	border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
	border-radius: 50% !important;
}
.sk-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
}
</style>
